import { defineComponent, reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { getDouBan } from "@/api/servies";
import { updateInfo } from "@/api/animes.ts";
import DouBanItem from "./DouBanItem";
import douBanInfo from "@/interface/doubanInfo";
import "./styles/AnimeItem.scss";

export default defineComponent({
  name: "AnmineItem",
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const state = reactive({
      showDouBan: false,
      douBanInfo: {
        id: 0,
        directors: "",
        rate: 0,
        writer: "",
        language: "",
        pub_time: "",
        location: "",
        types: "",
        more_than: "",
        actors: "",
        rate_count: 0,
        recommend_degree5: 0,
        recommend_degree4: 0,
        recommend_degree3: 0,
        recommend_degree2: 0,
        recommend_degree1: 0,
      },
      list: [],
      animeInfos: [
        [
          {
            title: "播放总量",
            key: "views",
            indexKey: "views_index",
          },
          {
            title: "弹幕总量",
            key: "danmakus",
            indexKey: "danmakus_index",
          },
          {
            title: "评论总量",
            key: "reply",
            indexKey: "reply_index",
          },
          {
            title: "硬币量",
            key: "coins",
            indexKey: "coins_index",
          },
          {
            title: "点赞总量",
            key: "likes",
            indexKey: "likes_index",
          },
          {
            title: "分享总量",
            key: "share",
            indexKey: "share_index",
          },
          {
            title: "追番总量",
            key: "favorites",
            indexKey: "favorites_index",
          },
          {
            title: "B站评分",
            key: "rate_score",
            indexKey: "score_index",
          },
        ],
        [
          {
            title: "B站评分",
            key: "avg_danmakus",
            indexKey: "avg_danmakus_index",
          },
          {
            title: "单集评论量",
            key: "avg_reply",
            indexKey: "avg_reply_index",
          },
          {
            title: "单集硬币量",
            key: "avg_coins",
            indexKey: "avg_coins_index",
          },
          {
            title: "单集点赞量",
            key: "avg_likes",
            indexKey: "avg_likes_index",
          },
          {
            title: "单集分享量",
            key: "avg_share",
            indexKey: "avg_share_index",
          },
        ],
      ],
      doubanInfos: [
        [
          {
            title: "导演：",
            key: "directors",
          },
          {
            title: "编剧：",
            key: "writer",
          },
          {
            title: "语言：",
            key: "language",
          },
          {
            title: "地区：",
            key: "location",
          },
          {
            title: "开播时间：",
            key: "pub_time",
          },
          {
            title: "类型：",
            key: "types",
          },
          {
            title: "好于：",
            key: "more_than",
          },
          {
            title: "演员：",
            key: "actors",
          },
        ],
        [
          {
            title: "评论数：",
            key: "rate_count",
          },
          {
            title: "5星：",
            isProgress: true,
            key: "recommend_degree5",
          },
          {
            title: "4星：",
            isProgress: true,
            key: "recommend_degree4",
          },
          {
            title: "3星：",
            isProgress: true,
            key: "recommend_degree3",
          },
          {
            title: "2星：",
            isProgress: true,
            key: "recommend_degree2",
          },
          {
            title: "1星：",
            isProgress: true,
            key: "recommend_degree1",
          },
        ],
      ],
    });

    const router = useRouter();

    const formatNumber = (num: number) => {
      let res = "";
      if (num) {
        res = num.toString();
        if (num > 10000) {
          num = num / 10000;
          res = num.toFixed(2) + "万";
        }
        if (num > 10000) {
          num = num / 10000;
          res = num.toFixed(2) + "亿";
        }
      }

      return res;
    };

    const getValue = (val: number, index: number) => {
      return formatNumber(val) + " / " + index;
    };

    const sortVal = computed(() => {
      let res = data.compre_index;
      if (state.showDouBan && state.douBanInfo.rate) {
        res = state.douBanInfo.rate;
      }
      return res;
    });

    const sortTitle = computed(() => {
      let res = "综合排名";
      if (state.showDouBan && state.douBanInfo.rate) {
        res = "豆瓣评分";
      }
      return res;
    });

    const linkDouBan = async (data: douBanInfo) => {
      await updateInfo(data.id, { did: data.mid });
      state.douBanInfo = data;
      state.list = [];
    };

    const getDouban = async () => {
      if (state.showDouBan) {
        state.showDouBan = false;
      } else {
        const res = await getDouBan({
          mid: props.data.did,
          title: props.data.title,
        });
        state.list = res;
        if (res.length == 1) {
          state.douBanInfo = res[0];
          if (!props.data.did) {
            await linkDouBan(res[0]);
          }
        }
        if (res.length > 0) {
          state.showDouBan = true;
        }
      }
    };

    const hanldeCardClick = () => {
      const to = {
        name: "servie",
        params: props.data,
      };

      router.push(to);
    };

    const { data } = props;

    return () => {
      return (
        <div class="anime-item">
          <a-card hoverable bordered style="width: 100%">
            <div class="left-con" onClick={hanldeCardClick}>
              <img alt="example" src={data.url} />
            </div>
            <div class="right-con">
              <div class="title" style="width: 100%">
                <span onClick={hanldeCardClick}>{data.title}</span>
                <span>
                  <a-tag
                    color={data.season_type === 1 ? "blue" : "red"}
                    style="margin-left: 1rem"
                  >
                    {data.season_type_name}
                  </a-tag>
                </span>

                <span onClick={getDouban}>
                  <a-tag color="green" style="margin-left: 1rem">
                    豆瓣数据
                  </a-tag>
                </span>
              </div>

              <div class="sort-info">
                {state.showDouBan ? (
                  <div style="flex: 1; width: 100%">
                    <div
                      class="list-group"
                      style={{
                        display: state.list.length == 1 ? "none" : "flex",
                      }}
                    >
                      {state.list.map((item, i) => {
                        return (
                          <div
                            class="douban-movie"
                            onClick={() => {
                              linkDouBan(item);
                            }}
                          >
                            <DouBanItem key={i} data={item} />
                          </div>
                        );
                      })}
                    </div>
                    {state.douBanInfo.id ? (
                      <div class="douban-info">
                        {state.doubanInfos.map((infos) => {
                          return (
                            <div class="info-group">
                              {infos.map((info) => {
                                if (info.isProgress) {
                                  return (
                                    <div class="info-item">
                                      <span>{info.title}</span>
                                      <a-progress
                                        percent={state.douBanInfo[info.key]}
                                        style="width:calc(100% - 5rem)"
                                      />
                                    </div>
                                  );
                                } else if (state.douBanInfo[info.key]) {
                                  return (
                                    <div class="info-item">
                                      <span>{info.title}</span>
                                      {state.douBanInfo[info.key]}
                                    </div>
                                  );
                                }
                              })}
                            </div>
                          );
                        })}
                      </div>
                    ) : (
                      ""
                    )}
                  </div>
                ) : (
                  <div style="flex: 1">
                    {state.animeInfos.map((items) => {
                      return (
                        <a-row type="flex" style="margin-bottom: 1rem">
                          <a-space size={30}>
                            {items.map((info) => {
                              return (
                                <a-statistic
                                  title={info.title}
                                  value={getValue(
                                    data[info.key],
                                    data[info.indexKey]
                                  )}
                                />
                              );
                            })}
                          </a-space>
                        </a-row>
                      );
                    })}
                  </div>
                )}

                <div class="comp-index">
                  {sortTitle.value}
                  <div class="comp-num">{sortVal.value}</div>
                </div>
              </div>

              <div class="evaluate">简介:{data.evaluate}</div>
            </div>
          </a-card>
        </div>
      );
    };
  },
});
